<template>
  <div>
    <section class="mdswiper">
      <div>
        <b-carousel
          id="carousel-1"
          v-model="slide"
          class="custom-carousel"
          :interval="4000"
          controls
          img-height="200"
          indicators
          background="#ababab"
          style="text-shadow: 1px 1px 2px #333"
          @sliding-start="onSlideStart"
          @sliding-end="onSlideEnd"
        >
          <!-- Text slides with image -->
          <b-carousel-slide
            class="custom-carousel"
            img-height="200"
            img-src="https://zlsc.oss-cn-shenzhen.aliyuncs.com/upload/202306/n1.png"
          ></b-carousel-slide>

          <!-- Slides with custom text -->
          <b-carousel-slide
            class="custom-carousel"
            img-src="https://zlsc.oss-cn-shenzhen.aliyuncs.com/upload/202306/n2.jpg"
          >
            <!-- <h1>Hello world!</h1> -->
          </b-carousel-slide>

          <!-- Slides with image only -->
          <b-carousel-slide
            img-height="200"
            class="custom-carousel"
            img-src="https://zlsc.oss-cn-shenzhen.aliyuncs.com/upload/202306/n3.jpg"
          ></b-carousel-slide>

          <!-- Slides with img slot -->
          <!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
          <b-carousel-slide img-height="200" class="custom-carousel">
            <template v-slot:img>
              <img
                class="d-block img-fluid w-100"
                width="1024"
                height="480"
                src="https://zlsc.oss-cn-shenzhen.aliyuncs.com/upload/202306/n4.jpg"
                alt="image slot"
              />
            </template>
          </b-carousel-slide>

          <!-- Slide with blank fluid image to maintain slide aspect ratio -->
        </b-carousel>
      </div>
    </section>
  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      slide: 0,
      sliding: null,
    }
  },
  methods: {
    onSlideStart(slide) {
      this.sliding = true
    },
    onSlideEnd(slide) {
      this.sliding = false
    },
  },
}
</script>

<style lang="scss" scoped></style>
